<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>搜索</ion-title>
  </ion-toolbar>
</ion-header>
<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-searchbar [(ngModel)]="text" (keydown)="keyDown($event)" placeholder="搜索"></ion-searchbar>
    <ion-buttons slot="end">
      <ion-button color="primary" fill="solid" (click)="search()">搜索</ion-button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar *ngIf="files.length">
    <ion-icon></ion-icon>
    <ion-label>
      搜索文件
      <ion-badge color="success">100</ion-badge>
      ，相关结果
      <ion-badge color="danger">100</ion-badge>
      ，耗时
      <ion-badge color="medium">100</ion-badge>
    </ion-label>
    <ion-button slot="end" fill="outline" (click)="clean()">清空</ion-button>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-header collapse="condense">
    <ion-toolbar>
      <ion-title size="large">搜索</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-card *ngFor="let f of files">
    <ion-card-header>
      <ion-card-subtitle>
        <ion-buttons>
          <ion-button color="primary" fill="outline">详情</ion-button>
          <ion-button color="success" fill="outline" (click)="show(f.name)">位置</ion-button>
          <ion-button color="success" fill="outline" (click)="open(f.name)">打开</ion-button>
          <ion-button color="danger" fill="outline">删除</ion-button>
        </ion-buttons>
      </ion-card-subtitle>
      <ion-card-title>
        <ion-badge color="primary">{{ f.id }}</ion-badge>
        {{ f.name }}
      </ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-item *ngFor="let h of f.hits">
        <ion-badge slot="start" color="medium">{{ h.line }}</ion-badge>
        <pre [innerHTML]="h.text | keyLight:h.words"></pre>
      </ion-item>
    </ion-card-content>
  </ion-card>

  <ion-card *ngIf="!files.length">
    <ion-card-header>
      <ion-card-subtitle>本地文件快速搜索</ion-card-subtitle>
      <ion-card-title>个人搜索引擎</ion-card-title>
    </ion-card-header>

    <ion-card-content>
    快速搜索
    </ion-card-content>
  </ion-card>
</ion-content>
